<template>
  <div class="home">
    <header>
      <h2>{{ $t("head") }}</h2>
      <div class="userLeft">
        <span class="headName">
          <el-tooltip :content="'切换成 ' + lang" placement="bottom">
            <el-switch
              v-model="lang"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-value="中文"
              inactive-value="english"
              @change="changeLang"
            ></el-switch>
          </el-tooltip>
          <i
            class="el-icon-s-custom"
            style="color: #409eff; fontsize: 20px"
          ></i>
          <span>{{
            $store.state.loginUser.loginName
              ? $store.state.loginUser.loginName
              : 未登入
          }}</span>
        </span>
        <el-button
          type="info"
          plain
          icon="el-icon-aim"
          size="mini"
          class="out"
          style="color: #a8c1dc; width: 80px; padding: 5px"
          @click="out"
          >退出登入</el-button
        >
      </div>
    </header>
    <div class="content">
      <div class="side">
        <keep-alive>
          <side />
        </keep-alive>
      </div>
      <div class="main">
        <!-- <keep-alive max=> -->
          <router-view />
        <!-- </keep-alive> -->
      </div>
    </div>
    <navbox />
  </div>
</template>

<script lang='ts'>
import { defineComponent, getCurrentInstance, ref } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import side from "../components/sideMenu.vue";
import navbox from "@/components/fan/dragnav.vue";  
export default defineComponent({
  components: { side ,navbox},
  setup() {
    //@ts-ignore
    let { ctx } = getCurrentInstance();
    let store = useStore();
    let router = useRouter();

    let lang = ref("english");
    let changeLang = (value: string) => {
      let lang = value == "中文" ? "en" : "zh";
      ctx.$i18n.locale = lang;
      localStorage.setItem("lang", lang);
    };
    let out = () => {
      store.dispatch("logout");
      ctx.$message("退出成功");
      router.push("/login");
    };
    return {
      out,
      lang,
      changeLang,
    };
  },
});
</script>

<style lang='less' scoped>
.home {
  width: 100vw;
  min-width: 800px;
  height: 100vh;
}
header {
  position: relative;
  width: 100%;
  height: 60px;
  background: url("../assets/img/head.jpg") no-repeat;
  background-size: 100%;
  color: #fff;
  padding: 10px;
  text-align: center;
  .userLeft {
    position: absolute;
    bottom: 10px;
    right: 20px;
    line-height: 28px;
    display: flex;
    font-size: 20px;
    vertical-align: baseline;
    .headName {
      display: inline-block;
      //   width:3em;
      height: 28px;
      line-height: 28px;
      span {
        margin: 0 15px 0 5px;
      }
    }
    .out {
      display: inline-block;
    }
  }
}
.content {
  height: calc(100% - 60px);
  display: flex;
}
.side {
  //   width: 200px;
  height: 100%;
  background-color: #635d5b;
}
.main {
  flex: 1;
  height: 100%;
  background-color: #a3dfa3;
  overflow: auto;
  // overflow-x: hidden;
}
.content ::-webkit-scrollbar {
  width: 8px;
  background: azure;
}
.content ::-webkit-scrollbar-corner,
.content ::-webkit-scrollbar-track {
  border-radius: 4px;
  background-color: rgb(217, 234, 238);
}
.content ::-webkit-scrollbar-thumb{
  border-radius: 4px;
  background-color: rgb(17, 187, 230);
}
</style>